import * as React from 'react';
import { forwardRef } from 'react';
import './index.scss';
import DataTable from '../data-table';

export interface WorkOrderLifecycleProps {
  width?: string | number;
  height?: string | number;
  title?: string;
  subtitle?: string;
  todayCount?: number;
  historyCount?: number;
  tableData?: any[];
  onClick?: () => void;
  theme?: 'light' | 'dark';
  style?: React.CSSProperties;
  className?: string;
}

const WorkOrderLifecycle = forwardRef<HTMLDivElement, WorkOrderLifecycleProps>((props, ref) => {
  const {
    width = 600,
    height = 310,
    title = '工单全生命周期管理',
    subtitle = 'Work order full life cycle management',
    todayCount = 36,
    historyCount = 36,
    headerTextColor = '#56A5FF',
    recordTextColor = 'rgba(255,255,255,0.9)',
    onClick,
    dataItem = [
      { title: '今日工单', subtitle: '累计完成数量', value: '36', unit: '件' },
      { title: '历史工单', subtitle: '累计完成数量', value: '36', unit: '件' }
    ],
    tableHeaders = [
      { key: 'title', value: '事件名称', width: '25' },
      { key: 'month', value: '时间', width: '15' },
      { key: 'type', value: '当前状态', width: '15' },
      { key: 'address', value: '位置', width: '32' },
      { key: 'expiring', value: '等级', width: '13' },
    ],
    records = [
      { id: '1', title: '事件名称', month: '07-01', address: '华阳老街是这里呀', type: '问题分类',  expiring: '一级'},
      { id: '2', title: '事件名称', month: '07-02', address: '地址', type: '问题分类', expiring: '一级' },
      { id: '3', title: '事件名称', month: '07-03', address: '地址', type: '问题分类', expiring: '一级' },
      { id: '4', title: '事件名称', month: '07-04', address: '地址', type: '问题分类', expiring: '一级' },
      { id: '5', title: '事件名称', month: '07-05', address: '地址', type: '问题分类', expiring: '一级' },
      { id: '6', title: '事件名称', month: '07-06', address: '地址', type: '问题分类', expiring: '一级' },
      { id: '7', title: '事件名称', month: '07-07', address: '地址', type: '问题分类', expiring: '一级' },
      { id: '8', title: '事件名称', month: '07-08', address: '地址', type: '问题分类', expiring: '一级' },
    ],
    style = {},
    className = '',
    ...otherProps
  } = props;

  const componentStyle: React.CSSProperties = {
    width: width,
    height: height,
    ...style
  };

  return (
    <div
      ref={ref}
      className={['hzdz-work-order-lifecycle', className].filter(Boolean).join(' ')}
      style={componentStyle}
      onClick={onClick}
      {...otherProps}
    >
      <div className="title-wrap" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/title-bg.png)'}}>
        <div className="title-str">
          <div className="title">
            <div>{title}</div>
            <div className="sen-title">{title}</div>
          </div>
          <div className="subtitle">{subtitle}</div>
        </div>
      </div>
      <div className="content-wrap">
        <div className="data-wrap">
          {dataItem.map((data, value) => (
            <div className="data-item">
              <div className="data-left">
                <div>{data.title}</div>
                <div>{data.subtitle}</div>
              </div>
              <div className="value">
                <div className="value-bg">
                  <div>{data.value}</div>
                  <span style={{
                    fontSize: 12,
                    paddingBottom: '5px'}}>{data.unit}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="item-head">
          <div className="head-round" style={{backgroundImage: 'url(static/images/zonghezhifa/point-icon-blue.png)'}} />
          <div className="head-title">工单信息统计</div>
          <div className="head-line" />
          <div className="head-right" style={{backgroundImage: 'url(static/images/zonghezhifa/left-icon-blue.png)'}} />
        </div>
        {/* 表格区域 */}
        <div className="table-area">
          {/* 表头 */}
          <div className="table-header" style={{backgroundImage:`url(http://localhost:8085/static/images/qixiangfangzhai/bz54.png)`}}>
            {tableHeaders.map((head,value) => (
              <div
                className="header-cell"
                style={{ color: headerTextColor, width: `${head.width}%` }}
              >
                {head.value}
              </div>
            ))}
          </div>
          {/* 表格数据 */}
          <div className="table-body"  style={{height: 'calc(100% - 40px)'}}>
            {records.map((record, index) => (
              <div
                key={record.id}
                className="table-row"
              >
                {tableHeaders.map((head) => (
                  <div
                    className="table-cell"
                    style={{ color: recordTextColor, width: `${head.width}%` }}
                  >
                    {record[head.key]}
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>

    </div>
  );
});

WorkOrderLifecycle.displayName = 'WorkOrderLifecycle';

export default WorkOrderLifecycle;
